<template>
  <div class="container">
    <MyHeader title="外卖订单求助中心"></MyHeader>
    <MyOrderList v-model="orderList" @accept="handleDialog"></MyOrderList>
    <MyDialog v-model="showDialog" title="确认帮忙处理此订单吗？" @helped="handleHelp" @handleTip="showTip"></MyDialog>
    <MyTooltip ref="myTip" :showTooltip.sync="showTooltip"></MyTooltip>
  </div>
</template>

<script>
import { orderList } from "./mock/index.js";
import MyHeader from "./components/MyHeader.vue";
import MyOrderList from "./components/MyOrderList.vue";
import MyDialog from "./components/MyDialog.vue";
import MyTooltip from "./components/MyTooltip.vue";
export default {
  data() {
    return {
      showDialog: false,
      acceptId: null,
      orderList: orderList,
      showTooltip: false
    };
  },
  components: {
    MyHeader,
    MyOrderList,
    MyDialog,
    MyTooltip
  },
  provide() {
    return {
      showDialog: this.showDialog
    };
  },
  methods: {
    handleDialog(orderId) {
      this.showDialog = true;
      this.acceptId = orderId;
    },
    handleHelp() {
      this.orderList = this.orderList.filter(
        item => item.orderId !== this.acceptId
      );
    },
    showTip() {
      this.$refs.myTip.show("订单已处理");
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>